<ion-menu side="start" content-id="main-content">
    <ion-header>
        <div class="menu-tool">
            <div class="menu-tool-back" [ngStyle]="{'background-image':'url('+userInfo.avatar+')'}"></div>
            <div class="menu-user">
                <ion-avatar>
                    <ion-img [src]="userInfo.avatar"></ion-img>
                </ion-avatar>
                <ion-label>{{userInfo.name}}</ion-label>
                <ion-badge slot="end">LV{{userInfo.lv}}</ion-badge>
            </div>
            <ion-text>{{userInfo.remark}}</ion-text>
        </div>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item>
                <ion-icon name="chatbox-ellipses-outline" slot="start"></ion-icon>
                <ion-label>我的消息</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="logo-vimeo" slot="start"></ion-icon>
                <ion-label>我的会员</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="happy-outline" slot="start"></ion-icon>
                <ion-label>每日心情</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="alarm-outline" slot="start"></ion-icon>
                <ion-label>定时关闭</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="shirt-outline" slot="start"></ion-icon>
                <ion-label>皮肤中心</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="barcode-outline" slot="start"></ion-icon>
                <ion-label>听歌识曲</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="shapes-outline" slot="start"></ion-icon>
                <ion-label>签到</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="scan-outline" slot="start"></ion-icon>
                <ion-label>扫一扫</ion-label>
            </ion-item>
            <ion-item>
                <ion-icon name="fitness-outline" slot="start"></ion-icon>
                <ion-label>锁屏歌词</ion-label>
            </ion-item>
            <ion-item lines="full">
                <ion-icon slot="start" name="moon"></ion-icon>
                <ion-label>
                    夜间模式
                </ion-label>
                <ion-toggle (ionChange)="onUpTheme($event)" slot="end"></ion-toggle>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<div class="ion-page" id="main-content">
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-menu-button auto-hide="false"></ion-menu-button>
            </ion-buttons>
            <ion-segment value="2" (ionChange)="onTabChange($event)">
                <ion-segment-button value="1">
                    <ion-label>我的</ion-label>
                </ion-segment-button>
                <ion-segment-button value="2">
                    <ion-label>推荐</ion-label>
                </ion-segment-button>
                <ion-segment-button value="3">
                    <ion-label>朋友</ion-label>
                </ion-segment-button>
            </ion-segment>
            <ion-buttons slot="primary">
                <ion-button>
                    <ion-icon name="search-outline"></ion-icon>
                </ion-button>
            </ion-buttons>
        </ion-toolbar>

    </ion-header>
    <ion-content class="">
        <router-outlet></router-outlet>
    </ion-content>
</div>